<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>

    <el-row :span="24">
        <el-card class="box-card list-app-card"  v-for="(value, key, index) in data" :key="key">
            <template #header>
                <div >
                    <span>{{key}}</span>
                </div>
            </template>

            <el-row :span="24">
                <el-col  v-for="o in value" :key="o"  :span="span" class="card-do">
                <div  v-on:click="todo(o)">
                            <div class="demo-basic--circle">
                                <div class="block"><el-avatar :size="50" :src="o.icon"></el-avatar></div>
                            </div>
                            <div class="sub-title">{{o.procName}}</div>
                </div>
                </el-col>




            </el-row>
        </el-card>
    </el-row>


</template>

<script>
    import taskAPI from '@/framework-code/api/task'

    export default {
        name: "myApp",
        data() {
            return {
                loading:false,
                data:[],
                span:3,
                option: {
                    addBtn:false,
                    props: {
                        "img": "img", "title": "title", "info": "text"
                    }
                }
            }
        },
        computed: {
            ...mapState({
                permissions: (state) =>state.user.permission,
            })

        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.span = window.isMobile?6:3;
                this.getList();
            },
            todo(row) {
               // this.$message.success(row)
              const routeData =  this.$router.resolve({
                    path: "/form/preview",
                    query: {
                      formId: row.formId,
                      dataId: '',
                      pageKey: "APPLY",
                      flowKey: row.procKey
                    }
                })

              window.open(routeData.href, '_blank');

            },
            getList() {
                this.loading = true;
                this.data = {};
                taskAPI.apiMyApp(
                    {
                        pageNum: 1,
                        pageSize: 100
                    }
                )
                    .then(response => {
                        var datas = response.data.data.records;
                        for(var iindex=0;iindex<datas.length ;iindex++) {
                            var dd = datas[iindex];
                            dd.icon = dd.icon ||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
                            var groups = this.data[dd.groupTag || '默认分组'];
                            if (!groups) {
                                groups = [];
                            }
                            groups.push(dd);
                            this.data[dd.groupTag || '默认分组'] = groups;
                        }
                        this.$message.success('获取成功')
                        this.loading = false;
                    })
                    .catch(() => {
                        this.loading = false;
                    });

            },
        }
    };
</script>
<style lang="scss">

    .card-do{
        text-align: center;
        cursor: pointer;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .list-app-card{
        margin-bottom: 5px;
    }

    .sub-title{
        font-size: 15px;
        white-space: nowrap; /* 保持文本在一行内显示 */
        overflow: hidden; /* 隐藏超出容器的内容 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
    }


    .box-card{
        width: 100%;
    }
</style>
